<template>
  <div class="search-container">
      <!-- 搜索框 -->
      <form action="/">
      <van-search
        autofocus
        v-model="searchContent"
        shape="round"
        background="#3296fa"
        placeholder="请输入搜索关键词"
        show-action
        clearable
        @search='handleSearch'
        @cancel='$router.back()'
        @focus="isShowResult = false"
        v-focus
        />
        </form>
                <!-- 搜索结果 -->
       <search-result v-if="isShowResult" :search-content="searchContent"></search-result>
        <!-- 联想 输入内容为空的时候才显示联想 -->
      <search-suggestion
       v-else-if="searchContent"
       :search-content="searchContent"
       @suggest-search='handleSuggestSearch'>
       </search-suggestion>
            <!-- 输入内容为空的时候才显示搜索历史 -->
                    <!-- 历史记录 -->
      <search-history v-else :search-history="searchHistory" @update-localhistory="handleUpdateLocalhistory" @search="handleHistorySearch"></search-history>
  </div>
</template>

<script>
import SearchHistory from './searchchild/SearchHistory.vue'
import SearchSuggestion from './searchchild/SearchSuggestion.vue'
import SearchResult from './searchchild/SearchResult.vue'
import { storageMinxis } from '../../mixins/storage'
import { getSearchHistory } from 'network/search'
import { mapState } from 'vuex'
export default {
  name: 'Search',
  mixins: [storageMinxis],
  components: { SearchHistory, SearchSuggestion, SearchResult },
  data () {
    return {
      isShowResult: false,
      // 输入框的内容
      searchContent: '',
      searchHistory: []
    }
  },
  created () {
    this.onloadSearchHistory()
  },
  methods: {
    // 处理用户回车搜索
    handleSearch (str) {
      console.log(str)
      console.log('23')
      if (!this.userState) {
        this.searchHistory.unshift(str)
        // 数组去重
        this.searchHistory = [...new Set(this.searchHistory)]
        this.setItem('userSearchHistory', this.searchHistory)
      }
      this.isShowResult = true
    },
    // 处理suggest子组件点击联想建议,直接显示相关结果
    handleSuggestSearch (str) {
      if (!this.userState) {
        this.searchHistory.unshift(str)
        this.setItem('userSearchHistory', this.SearchHistory)
      }
      this.searchContent = str
      this.isShowResult = true
    },
    handleHistorySearch (str) {
      if (!this.userState) {
        this.searchHistory.unshift(str)
        this.setItem('userSearchHistory', this.SearchHistory)
      }
      this.searchContent = str
      this.isShowResult = true
    },
    // 初始化本地历史记录
    async onloadSearchHistory () {
      if (this.userState) {
        const { data: res } = await getSearchHistory()
        console.log(res)
        this.searchHistory = res.data.keywords
        console.log(this.searchHistory)
      } else {
        this.searchHistory = this.getItem('userSearchHistory') || []
      }
    },
    // 本地存储的被清空了,历史记录要重新赋空
    handleUpdateLocalhistory () {
      this.searchHistory = []
      this.$toast({
        message: '成功清空历史记录',
        position: 'top'
      })
    }
  },
  computed: {
    ...mapState(['userState'])
  }
}
</script>

<style lang='less' scoped>
    .search-container{
      // padding-top: 46px;
    /deep/  .van-search__action{
          color: #fff;
      }
    }
</style>
